<template>
  <el-container style="padding:20px 0px 0px 20px; position:absolute; left:0; top:0; width:100%;height:100%;">

    <el-header>
<!--      <el-form :inline="true">-->

<!--        <el-form-item label="激活编辑" prop="editStatus">-->
<!--          <el-switch v-model="editStatus"></el-switch>-->
<!--        </el-form-item>-->
<!--        <el-form-item >-->
<!--          <el-button type="primary" @click="submitUpdation()">提交修改</el-button>-->
<!--        </el-form-item>-->



<!--      </el-form>-->
    </el-header>
    <el-main>
      <el-scrollbar>

        <el-col :span="24" class="toolbar">

            <el-carousel :interval="4000" type="card" height="this.winHeight + 'px'" style="max-width: 2000px; margin: auto">
              <el-carousel-item v-for="item in showPictures" :key="item">
                <div>
                  <img :src="item.imgUrl" style="min-width:100%; min-height:100% ; width:100%; height:100%" @dblclick="getInBigfarm()"/>
                </div>
              </el-carousel-item>
            </el-carousel>

        </el-col>

      </el-scrollbar>
    </el-main>


  </el-container>
</template>

<script>
  import {getLocalSpecies, updateLocalSpecies, updateSpeciesPic} from '../../api/SpeciesManage'

  export default {
    data() {
      return {

        showPictures: {
          img1: {
            imgUrl: require('@/assets/images/bigfarmShot.jpg'),
            title: "试验基地1"
          },
          img2: {
            imgUrl: require('@/assets/images/test1.png'),
            title: "试验基地2"
          },
          img3: {
            imgUrl: require('@/assets/images/test1.png'),
            title: "试验基地3"
          }
        },


        //species简表;
        curSpecies: {
          speciesId: this.GLOBAL.species.speciesId,
          img1: '',
          img2: '',
          img3: '',
          img4: '',
          img5: ''
        },
        winHeight: window.innerHeight - 70,

        screenWidth: document.body.clientWidth

      }
    },

    created() {
      // 刚打开页面时就去取数据；
      this.updatePic1API = this.GLOBAL.serverPath + '/species/updateSpeciesPic1'
      this.updatePic2API = this.GLOBAL.serverPath + '/species/updateSpeciesPic2'
      this.updatePic3API = this.GLOBAL.serverPath + '/species/updateSpeciesPic3'
      this.curSpecies = this.GLOBAL.species//空降过来的，故global中无species详细数据；
      console.log("屏幕尺寸：" + this.winHeight)

      this.fetchData()
      console.log('图片：' + this.speciesDetail.img1)
    },
    beforeMount: function() {
      this.height = this.winHeight + 'px'
    },

    mounted() {
      // 1、数据首次加载完后 → 获取图片（或外层框）宽度，并设置其高度
      this.$nextTick(() => {
        // 获取图片（或外层框）
        let imgBox = this.$refs.imgBox
        // 获取其宽度
        let wImgbox = imgBox[0].getBoundingClientRect().width
        // 设置其高度（以宽度的60%为例）
        this.imgBox.height = 0.6 * wImgbox + 'px'
      })
      // 2、挂载 reisze 事件 → 屏幕缩放时监听宽度变化
      const that = this
      window.onresize = () => {
        return (() => {
          // window.screenWidth = document.body.clientWidth
          // that.screenWidth = window.screenWidth
          // console.log(that.screenWidth)
          this.$nextTick(() => {
            let imgBox = this.$refs.imgBox
            let wImgbox = imgBox[0].getBoundingClientRect().width
            this.imgBox.height = 0.6 * wImgbox + 'px'
          })
        })()
      }
    },

    watch: {
      screenWidth(val) {

        if (!this.timer) {
          this.screenWidth = val
          this.timer = true
          let that = this
          setTimeout(function() {
            console.log("自适应" + that.screenWidth)
            that.timer = false
          }, 400)
        }
      }
    },



    methods: {
      handlePic1UploadSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.curSpecies.img1 = res.msg
        this.speciesImgs.img1 = this.GLOBAL.nginxPath + this.curSpecies.img1
        console.log(this.curSpecies.img1)
      },
      handlePic2UploadSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.curSpecies.img2 = res.msg
        this.speciesImgs.img2 = this.GLOBAL.nginxPath + this.curSpecies.img2
        console.log(this.curSpecies.img2)
      },
      handlePic3UploadSuccess(res, file) {
        console.log(res)
        console.log(file)
        this.curSpecies.img3 = res.msg
        this.speciesImgs.img3 = this.GLOBAL.nginxPath + this.curSpecies.img3
        console.log(this.curSpecies.img3)
      },

      getInBigfarm() {
        this.$router.push('/bigfarm')
      },
      fetchData() {
        if (this.GLOBAL.species.speciesId !== '') {
          this.listLoading = true
          getLocalSpecies({ 'speciesId': this.GLOBAL.species.speciesId }).then(response => {
            console.log(response)
            this.speciesDetail = response.data.rows[0]
            this.speciesDetail.speciesId = response.data.rows[0].speciesId
            this.speciesImgs.img1 = response.data.rows[0].img1;
            console.log(this.speciesDetail.speciesId)
            console.log("photo  " + this.speciesDetail.img1)

          })
        }
      },

      submitUpdation() {
        updateLocalSpecies(this.speciesDetail).then(response => {
          if (response.data.success === true) {
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 5000
            })
          } else {
            this.$notify({
              title: '失败',
              message: response.data.msg,
              type: 'failure',
              duration: 5000
            })
          }
        })
      },
      returnAllSpecies() {
        this.$router.push('/speciesmodule/localSpecies')
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 2000
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .clear {
    clear: both;
  }

  .el-form-item {
    max-width: 300px;
    float: left;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>



